<template>
	<view class="kui-w-full kui-h-full">
		<kui-page :custom-header="false">
			<template v-slot:body>
				<view class="kui-w-full kui-h-full">
					<view class="kui-my-3 kui-flex">
						<kui-text>暗黑模式：</kui-text>
						<kui-switch v-model="state.modeChecked" @change="changeMode"></kui-switch>
					</view>
					<kui-space :gap="[30,0]" direction="column">
						<kui-cell-group title="基本用法">
							<kui-cell title="文字提示" :show-right-icon="false" @click="baseState.methods.onClick('', '普通文本内容提示')"></kui-cell>
							<kui-cell title="展示标题" :show-right-icon="false" @click="baseState.methods.onClick('这是标题', '标题文本内容提示')"></kui-cell>
							<kui-cell title="底部展示" :show-right-icon="false" @click="baseState.methods.onClick('', '底部提示', false)"></kui-cell>
							<kui-cell title="自定义图标" :show-right-icon="false" @click="baseState.methods.onClick('', '自定义图标', true, '', '', false, 'help_outline')"></kui-cell>
						</kui-cell-group>
						<kui-cell-group title="提示类型">
							<kui-cell title="成功提示" :show-right-icon="false" @click="baseState.methods.onClick('', '成功提示', true, '', 'success')"></kui-cell>
							<kui-cell title="警告提示" :show-right-icon="false" @click="baseState.methods.onClick('', '警告提示', true, '', 'warning')"></kui-cell>
							<kui-cell title="失败提示" :show-right-icon="false" @click="baseState.methods.onClick('', '失败提示', true, '', 'danger')"></kui-cell>
							<kui-cell title="加载提示" :show-right-icon="false" @click="baseState.methods.onClick('', '加载提示', true, '', 'loading')"></kui-cell>
						</kui-cell-group>
						<kui-cell-group title="遮罩类型">
							<kui-cell title="白色遮罩" :show-right-icon="false" @click="baseState.methods.onClick('白色遮罩提示', '提示框之外的区域无法被点击穿透', true, '', '', true)"></kui-cell>
							<kui-cell title="无遮罩" :show-right-icon="false" @click="baseState.methods.onClick('无遮罩提示', '提示框之外的区域允许点击穿透', true, '', '', false)"></kui-cell>
						</kui-cell-group>
					</kui-space>
				</view>
			</template>
		</kui-page>
		<kui-toast :title="baseState.state.title" :content="baseState.state.content" :center="baseState.state.center" :bottom="baseState.state.bottom" :type="baseState.state.type" :overlay="baseState.state.overlay" :icon="baseState.state.icon" v-model:show="baseState.state.show"></kui-toast>
	</view>
</template>

<script lang="ts">
	import {
		reactive
	} from 'vue';
	
	export default {
		setup() {
			const baseState = {
				state: reactive({
					show: false,
					title: '',
					content: '',
					center: true,
					bottom: '50px',
					type: 'normal',
					overlay: false,
					icon: ''
				}),
				methods: {
					onClick(title: string = '', content: string = '', center: boolean = true, bottom: string = '50px', type: string = 'normal', overlay: boolean = false, icon: string = '') {
						baseState.state.show = true;
						baseState.state.title = title;
						baseState.state.content = content;
						baseState.state.center = center;
						baseState.state.bottom = bottom;
						baseState.state.type = type;
						baseState.state.overlay = overlay;
						baseState.state.icon = icon;
					}
				}
			};
			
			const state = reactive({
				mode: 'light',
				modeChecked: false
			});
			
			const changeMode = () => {
				state.mode = state.mode == "light" ? "dark" : "light";
				// provide("changeMode", data.mode);
				uni.$emit("changeMode", state.mode);
			};
			
			return {
				baseState,
				changeMode,
				state
			}
		}
	}
</script>

<style>

</style>
